currentTarget funciona cuando agrego style al elemento html. ¿Cómo puedo acceder al archivo de style del elemento en el que se hizo clic sin agregar style al elemento html?
const all = document.querySelectorAll(".all"); all.forEach((button) => { button.addEventListener("click", (e) => { let bgColor = e.currentTarget.style.backgroundColor; console.log(bgColor); }); }); div { color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: royalblue; } span { color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: red; } <div class="all">I'm a thin, big and insulated also soft, prickly box.</div> <span style="background-color: black;" class="all">I am useless</span>https://jsfiddle.net/bcz0t6gx/
Usa window.getComputedStyle() para obtener la CSSStyleDeclaration del elemento y getPropertyValue() para obtener el valor de la propiedad CSS:
const all = document.querySelectorAll(".all"); all.forEach((button) => { button.addEventListener("click", (e) => { let bgColor = window.getComputedStyle(e.currentTarget).getPropertyValue("background-color"); console.log(bgColor); }); }); .all { color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: royalblue; } span { color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: red; } <div class="all">I'm a thin, big and insulated also soft, prickly box.</div> <span style="background-color: black;" class="all">I am useless</span>Puede usar window.getComputedStyle para buscar estilos aplicados a un elemento. La siguiente función getStyle lo simplifica.
const getstyle=function(n,css){ let style; if( window.getComputedStyle ){ style = window.getComputedStyle( n, null ).getPropertyValue( css ); } else if( n.currentStyle ){ css = css.replace(/\-(\w)/g, function ( strMatch, p1 ){ return p1.toUpperCase(); }); style = n.currentStyle[ css ]; } else { style=''; } return style; }; document.querySelectorAll(".all").forEach((button) => { button.addEventListener("click", (e)=>{ console.log( getstyle(e.currentTarget,'background-color') ); }); }); .all {//changed this to prevent console becoming weird color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: royalblue; } span { color: white; height: 2em; width: 15em; margin: 2em; padding: 2em; background-color: red; } <div class="all">I'm a thin, big and insulated also soft, prickly box.</div> <span style="background-color: black;" class="all">I am useless</span>